<template>
  <span :style="style">{{ text }}</span>
</template>

<script setup lang="tsx">
import { CSSProperties, computed } from 'vue';
import { ColorEnum } from '@/constant/framework';

interface Props {
  text: string;
  status: keyof typeof ColorEnum;
}

const props = defineProps<Props>();

const style = computed<CSSProperties>(() => {
  const color = ColorEnum[props.status];
  return {
    fontSize: '12px',
    padding: '2px 6px',
    borderRadius: '2px',
    background: color,
  };
});
</script>
